<template>
  <div class="app-container">
    <!-- 交易所列表 -->
    <div class="cqt-box-item">
        <h3>我的交易所列表

            <el-button type="primary"  size="mini"  @click="handleAddExchange()" >添加 <i class="el-icon-upload el-icon--right"></i></el-button>
        </h3>
        <el-table
            :data="exchangeList"
            border
            stripe
            style="width:100%">
            <el-table-column
                prop="id"
                label="交易所ID"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="name"
                label="交易所名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                prop="alias"
                label="交易所別名"
                align="center"
                width="180">
            </el-table-column>

            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleView(scope.$index, scope.row)">查看</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestData.currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="requestData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logTotal">
        </el-pagination>
    </div>

<!-- 交易新增页面 -->
    <el-dialog title="交易新增页面" :visible.sync="dialogExchangeFormVisible">
        <el-form :model="exchangeForm">

            <el-form-item label="交易所名称" label-width="120px">
                <el-input v-model="exchangeForm.name" auto-complete="off"  ></el-input>
            </el-form-item>
   
            <el-form-item label="交易所别名" label-width="120px">
                <el-input v-model="exchangeForm.alias" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="公钥" label-width="120px">
                <el-input v-model="exchangeForm.publicKey" auto-complete="off" ></el-input>
            </el-form-item>

            <el-form-item label="私钥" label-width="120px">
                <el-input v-model="exchangeForm.privateKey" auto-complete="off" ></el-input>
            </el-form-item>
            
            <el-form-item label="交易对" label-width="120px">
            <el-tag
                :key="tag"
                v-for="tag in exchangeForm.coinPairs"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>    
            </el-form-item>      

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogExchangeFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitExchange">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import { getExchangeList, deleteExchange, addExchange } from "@/api/exchange";

export default {
  data() {
    return {
      inputVisible: false,
      inputValue: "",

      exchangeList: [],
      logTotal: 0,
      requestData: {
        currentPage: 1,
        pageSize: 100
      },

      //交易所新增页面是否展示
      dialogExchangeFormVisible: false,
      //交易所信息编辑页面缓存数据
      exchangeForm: {
        name: null,
        code: null,
        alias: null,
        publicKey: null,
        privateKey: null,
        coinPairs: []
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 初始化请求
      this.loadExchangeList();
    },

    //加载所有的策略列表
    loadExchangeList() {
      getExchangeList(this.requestData).then(response => {
        var data = response.data;
        this.exchangeList = data.list;
        this.logTotal = data.total;
      });
    },

    //跳转页面并且传参数Id到路由
    handleView(index, row) {
      console.log(index, row);
      this.$router.push({ path: "/exchange/info?id=" + row.id });
    },

    //删除某条交易所信息
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //准备参数
          var params = {
            exchangeId: row.id
          };
          // TODO 发出删除请求
          deleteExchange(params).then(response => {
            this.exchangeList.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //新增交易所信息
    handleAddExchange() {
      this.dialogExchangeFormVisible = true;
    },

    //新增交易所请求的发送
    submitExchange() {
      var data = {
        name: this.exchangeForm.name,
        code: this.exchangeForm.code,
        alias: this.exchangeForm.alias,
        publicKey: this.exchangeForm.publicKey,
        privateKey: this.exchangeForm.privateKey,
        coinPairs: this.exchangeForm.coinPairs
      };

      let param = this.exchangeForm.coinPairs.join(",");
      data.coinPairs = param;
      addExchange(data)
        .then(response => {
          this.$message("操作成功");
          this.dialogExchangeFormVisible = false;
          this.loadExchangeList();

          this.exchangeForm = {
            name: null,
            code: null,
            alias: null,
            publicKey: null,
            privateKey: null,
            coinPairs: []
          };
        })
        .catch(err => {
          console.log("新增失败", err);
          this.exchangeForm = {
            name: null,
            code: null,
            alias: null,
            publicKey: null,
            privateKey: null,
            coinPairs: []
          };
        });
    },

    handleClose(tag) {
      this.exchangeForm.coinPairs.splice(
        this.exchangeForm.coinPairs.indexOf(tag),
        1
      );
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.exchangeForm.coinPairs.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.requestData.pageSize = val;
      this.loadLogData();
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.requestData.currentPage = val;
      this.loadLogData();
    }
  }
};
</script>

<style scoped>
.cell .el-tag {
  margin-left: 2px;
  margin-right: 2px;
}
.el-table {
  margin-bottom: 20px;
}
.cqt-caption {
  font-size: 14px;
  color: #ccc;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
